<template>
  <div id="dateview" ref="dateview" style="height: 75px">
    <div class="switchdate">
      <span @click="prey">&lt;</span>
      <span @click="prem"> 《 </span>
      <span>{{ year }}-{{ months }}</span>
      <span @click="nextm"> 》</span>
      <span @click="nexty">&gt;</span>
      <span
        @click="
          year = baseyear;
          months = basemonth;
          daytemp = day;
          getmonth();
        "
        >今天</span
      >
    </div>
    <div class="btn" @click="btnclick"></div>
    <div>
      <ul
        ref="weekmark"
        style="
          display: flex;
          list-style-type: none;
          padding-top: 10px;
          z-index: 3;
          position: relative;
          top: -40px;
          background-color: white;
          transition: all 0.5s;
        "
      >
        <li class="days">日</li>
        <li class="days">一</li>
        <li class="days">二</li>
        <li class="days">三</li>
        <li class="days">四</li>
        <li class="days">五</li>
        <li class="days">六</li>
      </ul>
      <div
        style="
          position: relative;
          top: 0px;
          z-index: 2;
          background-color: white;
          transition: all 0.5s;
        "
        ref="date"
      >
        <ul
          v-for="(weeks, idx) in month"
          :key="idx"
          style="
            display: flex;
            justify-content: flex-start;
            list-style-type: none;
            margin: 8px auto 8px auto;
          "
          @click="getselectn(idx)"
        >
          <li
            v-for="(days, ind) in weeks"
            :key="ind"
            :class="[
              'days',
              days == day && year == baseyear && months == basemonth
                ? 'action'
                : '',
              days == daytemp && year == bhyear && months == bhmonth
                ? 'click'
                : '',
            ]"
            @click="dateclick(days)"
          >
            {{ days }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      month: [[], [], [], [], [], []],
      day: '',
      daytemp: '',
      year: '',
      months: '',
      baseyear: '',
      basemonth: '',
      bhyear: '',
      bhmonth: '',
      selectn: '',
    };
  },
  methods: {
    btnclick() {
      let top = this.$refs.dateview.style.height;
      if (top == '75px') {
        this.$refs.dateview.style.height = '280px';
        this.$refs.date.style.top = '0';
        this.$refs.weekmark.style.top = '0';
      } else {
        this.$refs.dateview.style.height = '75px';
        this.$refs.date.style.top = -40 - 33 * this.selectn + 'px';
        this.$refs.weekmark.style.top = '-40px';
      }
    },
    dateclick(e) {
      if (e) {
        this.daytemp = e;
        this.bhyear = this.year;
        this.bhmonth = this.months;
      }
    },
    getmonth() {
      let year = this.year;
      let month = this.months;
      let week = new Date(`${year}-${month}-1`).getDay();
      let days = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
      if ((year % 100 == 0 && year % 400 == 0) || year % 4) {
        days[1] = 29;
      }
      this.month[0][week] = 1;
      for (let i = 0; i < this.month.length; i++) {
        this.month[i].splice(0, this.month[i].length);
      }
      for (let i = 1; i <= days[month - 1]; i++) {
        let row = Math.floor((i - 1 + week) / 7);
        if (this.day == i) {
          this.selectn = row;
        }
        let col = (i - 1 + week) % 7;
        this.month[row][col] = i;
      }
    },
    prem() {
      if (this.months - 1 < 1) {
        this.months = 12;
        this.year = this.year - 1;
      } else {
        this.months = this.months - 1;
      }
      this.bhyear = this.year;
      this.bhmonth = this.months;
      this.daytemp = 1;
      this.getmonth();
      this.selectn = 0;
    },
    nextm() {
      if (this.months + 1 > 12) {
        this.months = 1;
        this.year = this.year + 1;
      } else {
        this.months = this.months + 1;
      }
      this.bhyear = this.year;
      this.bhmonth = this.months;
      this.daytemp = 1;
      this.getmonth();
      this.selectn = 0;
    },
    prey() {
      this.year = this.year - 1;
      this.bhyear = this.year;
      this.bhmonth = this.months;
      this.daytemp = 1;
      this.getmonth();
      this.selectn = 0;
    },
    nexty() {
      this.year = this.year + 1;
      this.bhyear = this.year;
      this.bhmonth = this.months;
      this.daytemp = 1;
      this.getmonth();
      this.selectn = 0;
    },
    getselectn(e) {
      this.selectn = e;
    },
  },
  watch: {
    daytemp() {
      let date = `${this.bhyear}-${this.bhmonth}-${this.daytemp}`;
      this.$emit('getselectdate', date);
    },
  },
  created() {
    let now = new Date();
    this.year = now.getFullYear();
    this.baseyear = this.year;
    this.months = now.getMonth() + 1;
    this.basemonth = this.months;
    this.bhyear = this.year;
    this.bhmonth = this.months;
    this.day = now.getDate();
    this.getmonth();
  },
  mounted() {
    this.$refs.date.style.top = -40 - 33 * this.selectn + 'px';
  },
};
</script>

<style scoped>
.switchdate {
  display: flex;
  justify-content: center;
  cursor: pointer;
  margin: 10px;
}
.click {
  background-color: rgb(124, 213, 124);
  color: white;
}
.btn {
  width: 100px;
  height: 6px;
  border-radius: 20px;
  border: 1px solid;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 999;
  cursor: pointer;
}
#dateview {
  width: 95%;
  border-radius: 20px;
  box-shadow: 0 0 9px rgb(116, 116, 116);
  margin: 10px auto;
  overflow: hidden;
  z-index: 1;
  position: relative;
  transition: all 0.5s;
  background-color: #fff;
}
.days {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 40px;
  cursor: pointer;
}
.action {
  background-color: rgb(32, 160, 255);
  color: white;
}
</style>
